<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" :footer="null">
    <div class="configs-form-container">
      <a-form :model="formData" layout="vertical" class="configs-form">
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="配置键" required>
                <a-input v-model:value="formData.configKey" placeholder="请输入配置键" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="配置类型">
                <a-select v-model:value="formData.configType" placeholder="请选择配置类型" allowClear>
                  <a-select-option value="string">字符串</a-select-option>
                  <a-select-option value="number">数字</a-select-option>
                  <a-select-option value="boolean">布尔值</a-select-option>
                  <a-select-option value="json">JSON</a-select-option>
                  <a-select-option value="array">数组</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="配置值">
            <a-textarea v-model:value="formData.configValue" placeholder="请输入配置值" :rows="4" />
          </a-form-item>
          <a-form-item label="配置描述">
            <a-textarea v-model:value="formData.description" placeholder="请输入配置描述" :rows="2" />
          </a-form-item>
        </div>

        <!-- 显示设置 -->
        <div class="form-section">
          <h3 class="section-title">显示设置</h3>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="页面类型">
                <a-select v-model:value="formData.pageType" placeholder="请选择页面类型" allowClear>
                  <a-select-option value="home">首页</a-select-option>
                  <a-select-option value="blog">博客</a-select-option>
                  <a-select-option value="about">关于</a-select-option>
                  <a-select-option value="contact">联系</a-select-option>
                  <a-select-option value="admin">管理后台</a-select-option>
                  <a-select-option value="global">全局</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="排序权重">
                <a-input-number v-model:value="formData.sortOrder" placeholder="请输入排序权重" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <!-- 状态设置 -->
        <div class="form-section">
          <h3 class="section-title">状态设置</h3>
          <a-form-item label="配置状态" required>
            <a-radio-group v-model:value="formData.status">
              <a-radio :value="0">禁用</a-radio>
              <a-radio :value="1">启用</a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
        <!-- 操作按钮 -->
        <div class="form-actions">
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleSubmit" :loading="submitLoading">
            {{ isUpdate ? '更新' : '保存' }}
          </a-button>
        </div>
      </a-form>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, reactive, defineOptions } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { saveOrUpdate } from '../BlogConfigs.api';
  import { message } from 'ant-design-vue';

  defineOptions({ name: 'BlogConfigsModal' });

  // Emits声明
  const emit = defineEmits(['register', 'success']);

  const submitLoading = ref(false);
  const isUpdate = ref(false);

  // 表单数据
  const formData = reactive({
    id: '',
    configKey: '',
    configValue: '',
    configType: 'string',
    description: '',
    pageType: '',
    sortOrder: 0,
    status: 1,
    createdTime: '',
    updatedTime: '',
  });

  // 表单配置
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    // 重置表单
    Object.keys(formData).forEach((key) => {
      if (key === 'sortOrder' || key === 'status') {
        formData[key] = 0;
      } else {
        formData[key] = '';
      }
    });
    formData.status = 1; // 默认启用
    formData.configType = 'string'; // 默认字符串类型

    setModalProps({ confirmLoading: false, showCancelBtn: false, showOkBtn: false });
    isUpdate.value = !!data?.isUpdate;

    if (unref(isUpdate)) {
      // 表单赋值
      Object.keys(data.record).forEach((key) => {
        if (formData.hasOwnProperty(key)) {
          formData[key] = data.record[key];
        }
      });
    }
  });

  // 设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增配置' : '编辑配置'));

  // 取消操作
  const handleCancel = () => {
    closeModal();
  };

  // 表单提交事件
  async function handleSubmit() {
    try {
      // 验证必填字段
      if (!formData.configKey.trim()) {
        message.error('请输入配置键');
        return;
      }

      setModalProps({ confirmLoading: true });
      submitLoading.value = true;

      // 提交表单
      await saveOrUpdate(formData, isUpdate.value);

      // 关闭弹窗
      closeModal();
      // 刷新列表
      emit('success');
      message.success(isUpdate.value ? '更新成功' : '保存成功');
    } catch (error) {
      console.error('提交失败:', error);
      message.error('提交失败');
    } finally {
      setModalProps({ confirmLoading: false });
      submitLoading.value = false;
    }
  }
</script>

<style lang="less" scoped>
  .configs-form-container {
    padding: 12px 0 0 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
    min-height: 420px;
    max-width: 700px;
    margin: 0 auto;
    @media (max-width: 600px) {
      padding: 4px 0 0 0;
      min-height: 320px;
      border-radius: 0;
      max-width: 100vw;
    }
  }

  .configs-form {
    padding: 0 16px;
    @media (max-width: 600px) {
      padding: 0 2px;
    }
  }

  .form-section {
    margin-bottom: 24px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
      color: #222;
      border: none;
      padding-bottom: 0;
      letter-spacing: 0.5px;
      text-align: left;
    }
  }

  .form-actions {
    text-align: center;
    margin-top: 24px;
    padding: 16px 0;
    border: none;
    background: transparent;
    border-radius: 0;

    .ant-btn {
      margin: 0 6px;
      min-width: 90px;
      font-size: 14px;
      border-radius: 18px;
      height: 34px;
      box-shadow: none;
      border: none;
      font-weight: 500;
      background: #f3f4f6;
      color: #222;
      transition: all 0.18s;

      &:hover {
        background: #e0e7ef;
        color: #2563eb;
      }

      &:active {
        background: #dbeafe;
        color: #2563eb;
      }
    }

    .ant-btn-primary {
      background: linear-gradient(90deg, #3b82f6 60%, #2563eb 100%);
      color: #fff;
      font-weight: 600;
      box-shadow: none;
      border: none;

      &:hover,
      &:active {
        background: linear-gradient(90deg, #2563eb 60%, #3b82f6 100%);
        color: #fff;
      }
    }
  }

  :deep(.ant-form-item) {
    margin-bottom: 18px;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-textarea),
  :deep(.ant-select) {
    border-radius: 8px;
    font-size: 15px;
    min-height: 32px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    box-shadow: none;
    transition: border 0.18s;

    &:focus,
    &:hover {
      border-color: #3b82f6;
      background: #fff;
    }
  }

  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-radio-group) {
    font-size: 15px;

    .ant-radio-inner {
      border-radius: 50%;
      border-color: #d1d5db;
    }

    .ant-radio-checked .ant-radio-inner {
      border-color: #3b82f6;
      background: #3b82f6;
    }
  }

  :deep(.ant-form-item-label > label) {
    font-weight: 400;
    color: #888;
    letter-spacing: 0.2px;
    font-size: 14px;
  }

  :deep(.ant-select-selector) {
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
  }

  :deep(.ant-select-focused .ant-select-selector) {
    border-color: #3b82f6 !important;
    background: #fff !important;
  }
</style>